{% extends 'base.html' %}

{% block title %}
    <title>购物车</title>
{% endblock %}

{% block cssjs %}
    <link rel="stylesheet" href="/static/css/cart.css" type="text/css">
{% endblock %}


{% block content %}

    <div class="content">
        <div class="cart_img">
            <img src="/static/img/cart_sub.gif" alt=""/>
        </div>
    {% if cart_lists %}
        <div class='cart_success'>
            <div class='orderTips'>
                <em></em>
                <div class='orderTips_m'>
                    <span class="goods_success">成功加入{{ cart_lists.0.name }}商品到购物车</span>
                </div>
            </div>
            <div class='cart_pro'>

            <table width='100%'>
                    <tr>
                        <th><input type="checkbox" checked class="select_all_check"/>全选</th>
                        <th>商品图片</th>
                        <th>商品名称</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>操作</th>
                    </tr>
                    {% for cart_list in cart_lists %}
                        <tr class='goods_tr'>
                            <td>
                                {% if cart_list.selected == '1' %}
                                    <input type="checkbox" checked class="select_check" goodsid="{{ cart_list.id }}"/>
                                {% else %}
                                    <input type="checkbox" class="select_check" goodsid="{{ cart_list.id }}"/>
                                {% endif %}
                            </td>
                            <td class="t_img">
                                <a href="">
                                    <img src="{{ cart_list.img }}" alt="">
                                </a>
                            </td>
                            <td class='cart_pro_name'>
                                <a href="">{{ cart_list.name }}</a>
                            </td>
                            <td>
                                <button class='sub' goodsid="{{ cart_list.id }}">-</button>
                                <span class='num'>{{ cart_list.num }}</span>
                                <button class='add' goodsid="{{ cart_list.id }}">+</button>
                            </td>
                            <td class="cart_price">￥
                                <span class="price">{{ cart_list.price }}</span>
                            </td>
                            <td class='delet_td'>
                                <a href="">移至收藏</a><br/>
                                <a href="" class='delet_goods' goodsid="{{ cart_list.id }}">删除商品</a>
                            </td>
                        </tr>

                    {% endfor %}

                </table>
            </div>
            {% else %}
                <div class="cart_none">
                    <div class="cart_none_user">
                        <h3>
                            购物车内暂时没有商品,赶紧去购物吧 <br>
                            <a href="{% url 'index:info' %}">商城首页</a>
                        </h3>
                    </div>
                </div>
            {% endif %}


            <div class='cart_price'>
                <p>总计（不含运费）：</p>
                <span class='pay_goods' ></span>
            </div>
            <div class='pay'>
                <button>
                    <a href="{% url 'orders:order' %}"><img src="/static/img/balance.gif" alt="" class="order_to_pay"></a>
                </button>
            </div>
        </div>

    </div>
		
		<script type="text/javascript">
        $(function () {
            {# 计算总价 #}
            function total_price(){
                var total_price = 0;
                $('.select_check:checked').each(function () {
                    var price = parseFloat($(this).parent().parent().find('.price').text());
                    var num = parseInt($(this).parent().parent().find('.num').text());
                    var good_price = price * num;
                    total_price += good_price
                });
                total_price = total_price.toFixed(2);
                $('.pay_goods').text(total_price)
            }

            {# 复选框与全选框 #}
            function selected_all(){
                var flag = true;
                $('.select_check').each(function () {
                    if(!$(this).prop('checked')){
                    flag = false;
                    return false; {# 跳出 each 循环 #}
                    }
                });
                if(!flag){
                    $('.select_all_check').prop('checked', false)
                }
                else{
                    $('.select_all_check').prop('checked', true)
                }

            }
            {# 加载页面就调用函数 #}
            total_price();
            selected_all();



            {# 加号效果 #}
            $('.add').click(function(){
                var num = $(this).siblings('span').text();
                num = parseInt(num) + 1;
                $(this).siblings('span').text(num);
                total_price();

                var gid = $(this).attr('goodsid');
                var selected = $(this).parent().parent().find('.select_check').prop('checked') ? '1' : '0';
                $.ajax({
                    url:'{% url "goods:cartdata" %}',
                    type:'post',
                    dataType:'json',
                    data:{
                        'num': num,
                        'gid': gid,
                        'selected': selected
                    },
                    headers:{'X-CSRFToken': '{{ csrf_token }}'},
                    success:function (data) {

                    }
                })
            });


            {# 减号效果 #}
            $('.sub').click(function(){
                var num = $(this).siblings('span').text();
                if(num==1){
                    $(this).parent().parent().remove();
                    if($('.goods_tr').length==0){
                        $('.cart_success').remove();
                        $('.cart_none').css(display=block)

                    }
                }
                num = parseInt(num) - 1;
                $(this).siblings('span').text(num);
                total_price();

                var gid = $(this).attr('goodsid');
                var selected = $(this).parent().parent().find('.select_check').prop('checked') ? '1' : '0';
                $.ajax({
                    url:'{% url "goods:cartdata" %}',
                    type:'post',
                    dataType:'json',
                    data:{
                        'num': num,
                        'gid': gid,
                        'selected': selected
                    },
                    headers:{'X-CSRFToken': '{{ csrf_token }}'},
                    success:function (data) {

                    }
                })
            });


            {# 复选框效果 #}
            $('.select_check').click(function () {
                var num = $(this).parent().parent().find('.num').text();
                var gid = $(this).attr('goodsid');
                var selected = $(this).prop('checked') ? '1' : '0'
                total_price();
                selected_all();

                $.ajax({
                    url:'{% url "goods:cartdata" %}',
                    type:'post',
                    dataType:'json',
                    data:{
                        'num': num,
                        'gid': gid,
                        'selected': selected
                    },
                    headers:{'X-CSRFToken': '{{ csrf_token }}'},
                    success:function (data) {

                    }
                })

            });

            {# 全选框效果 #}
            $('.select_all_check').click(function () {
                $('.select_check').prop('checked',$(this).prop('checked'));
                total_price();
                $.ajax({
                    url:'{% url "carts:status" %}',
                    type: 'post',
                    data: {'select': $(this).prop('checked')},
                    dataType: 'json',
                    async:false,
                    headers: {'X-CSRFToken': '{{ csrf_token }}'},
                    success:function(data){

                    }
                })
            });

            {# 删除商品 #}
            $('.delet_goods').click(function () {
                if(!confirm("是否确定删除")){
                    return false
                }
                var gid = $(this).attr('goodsid');
                var _this = $(this);

                $.ajax({
                    url:'{% url "carts:delgood" %}',
                    type:'post',
                    dataType:'json',
                    data:{'gid':gid},
                    async:false,
                    headers:{'X-CSRFToken': '{{ csrf_token }}'},
                    success:function (data) {
                        if(data.res == 'ok'){
                            location.reload()
                        }
                    }
                })

            });
            
            {# 购买按钮 #}
            $('.order_to_pay').click(function () {
                if($('.select_check:checked').length==0){
                    alert('请最少选中一个商品');
                    return false; {# 阻止a链接的默认 跳转 #}
                }

            })


         });




{#			function refreshCart() {#}
{##}
				{#$(".goods_tr").remove();#}
{##}
{#				var goodslist = $.cookie("cart");#}
{#				if(goodslist){#}
{#					goodslist=JSON.parse($.cookie("cart"));#}
{#					var priceArr=[];#}
{#					for(var i=0;i<goodslist.length;i++){#}
{##}
{#						var obj=goodslist[i];#}
{#						var price=JSON.parse(obj.price)*obj.num;#}
{#						priceArr.push(price);#}
{#//						console.log(priceArr)#}
{#						var priceSum=0;#}
{#						for(var j=0;j<priceArr.length;j++){#}
{##}
{#							priceSum+=priceArr[j];#}
{#						}#}
{#//						console.log(priceSum)#}
{#						$(".pay_goods").html("￥"+priceSum);#}
{#						$(".cart_none").remove();#}
{#						$(".cart_success").show();#}
{#						$(".goods_success").html("成功加入 "+obj.name+" 商品到购物车");#}
{#						var tbody=$("<tr class='goods_tr'></tr>");#}
{#						var t_img=$("<td class='t_img'><a href=''><img id="+ i +" src="+obj.img+"></a></td>");#}
{#						var t_name=$("<td class='cart_pro_name'><a href=''>"+obj.name+"</a></td>");#}
{#						var t_num=$("<td><button class='sub'>-</button><span class='num'>"+obj.num+"</span><button class='add'>+</button></td>");#}
{#						var t_price=$("<td>￥"+obj.price+"</td>");#}
{#						var t_delet=$("<td class='delet_td'><a>移至收藏</a><br/><a class='delet_goods'>删除商品</a></td>");#}
{#						tbody.append(t_img,t_name,t_num,t_price,t_delet);#}
{#						$("table").append(tbody)#}
{##}
{##}
{#					}#}
{#				}#}
{#			}#}

{#			$(function(){#}
{##}
{##}
{#				refreshCart();#}
{##}
{##}
{#				$(".content").on("click",".sub", function(){#}
{##}
{#					goodslist_sub=JSON.parse($.cookie("cart"));#}
{##}
{#					for(var i=0;i<goodslist_sub.length;i++){#}
{#						var obj=goodslist_sub[i];#}
{##}
{#							if($(this).parent().siblings(".cart_pro_name").find("a").html()==obj.name){#}
{#							if(obj.num>1){#}
{#								obj.num--;#}
{#							}#}
{#							}#}
{##}
{#					}#}
{#					$.cookie("cart",JSON.stringify(goodslist_sub),{expires:10,path:"/"})#}
{#					refreshCart();#}
{#					console.log($.cookie("cart"))#}
{#				});#}
{##}
{#				$(".content").on("click",".add",function(){#}
{#					goodslist_add=JSON.parse($.cookie("cart"));#}
{#					for(var i=0;i<goodslist_add.length;i++){#}
{#						var obj=goodslist_add[i];#}
{#//						console.log(obj)#}
{##}
{#						if($(this).parent().siblings(".cart_pro_name").find("a").html()==obj.name){#}
{#							obj.num++;#}
{#							if(obj.num>99){#}
{#								obj.num=99;#}
{#								alert("库存不足")#}
{#							}#}
{#						}#}
{#					}#}
{#					$.cookie("cart",JSON.stringify(goodslist_add),{expires:10,path:"/"})#}
{#					refreshCart();#}
{#				})#}
{##}
{#				$(".content").on("click",".delet_goods",function(){#}
{#					goodslist_delet=JSON.parse($.cookie("cart"));#}
{#//					console.log(goodslist_delet.length)#}
{#					for(var i=0;i<goodslist_delet.length;i++){#}
{#//						goodslist_delet[i].index=i;#}
{#//						console.log(i)#}
{#						var obj=goodslist_delet[i];#}
{#						if($(this).parent().siblings(".t_img").find("img").attr("id")==(obj.id-1)){#}
{#							goodslist_delet.splice($(this).parent().siblings(".t_img").find("img").attr("id"),1);#}
{#							console.log(obj.id-1);#}
{#							console.log($(this).parent().siblings(".t_img").find("img").attr("id"));#}
{#							console.log(goodslist_delet)#}
{#						}#}
{#						else{#}
{#							goodslist_delet.splice(($(this).parent().siblings(".t_img").find("img").attr("id"))-1,1);#}
{#						}#}
{#					}#}
{#					$.cookie("cart",JSON.stringify(goodslist_delet),{expires:10,path:"/"});#}
{#					window.location.reload();#}
{#					console.log(JSON.parse($.cookie("cart")))#}
{#				})#}
{##}
{##}
{#				$(".content").on("click",".pay button",function(){#}
{#					$(".all").show();#}
{#					$(".pay_success").show()#}
{#				});#}
{#				$(".true").click(function(){#}
{#					$(".success").show();#}
{#					$(".pay_success").hide()#}
{#				});#}
{#				$(".false").click(function(){#}
{#					$(".all").hide();#}
{#					$(".pay_success").hide()#}
{#				});#}
{#				$(".back").click(function(){#}
{#					$(".all").hide();#}
{#					$(".success").hide();#}
{#					$.cookie("cart",null,{expires:0,path:"/"});#}
{#					$(".cart_success").remove();#}
{#					window.location.reload(true);#}
{#				})#}
{##}
{#			})#}
		</script>

		<div class="all"></div>
		<div class="success">
			支付成功!
			<p class="back">返回购物车<< </p>
		</div>
		<div class="pay_success">
			<div class="pay_true">
				<p>您要结算吗?</p>
			</div>
			<button class="true">确定</button>
			<button class="false">取消</button>
		</div>
{% endblock %}

{% block help %}

    <div class="help">
        <ul>
            <li class="help_title">购物指南</li>
            <li><a href="">购物流程</a></li>
            <li><a href="">配送方式</a></li>
        </ul>
        <ul>
            <li class="help_title">支付方式</li>
            <li><a href="">如何付款</a></li>
            <li><a href="">发票制度</a></li>
        </ul>
        <ul>
            <li class="help_title">商品说明</li>
            <li><a href="">商品尺码</a></li>
            <li><a href="">商品包装</a></li>
        </ul>
        <ul>
            <li class="help_title">客服中心</li>
            <li><a href="">七天退还</a></li>
            <li><a href="">常见问题</a></li>
        </ul>
        <ul class="help_mid">
            <li style="padding-top: 13px;line-height: 26px;">
                <h5>订购热线</h5>
                <br/>
                <h4>4000-250-630</h4>
            </li>
        </ul>
        <ul class="help_mid" style="width: 145px;">
            <li style="padding-top: 13px;">
                <span>在线客服</span>
                <div class="tel">
                    <a href=""><img src="/static/img/tencent.png" alt="" /></a>
                    <a href=""><img src="/static/img/erji.png" alt="" /></a>
                </div>
            </li>
        </ul>
        <ul class="help_mid" style="width: 190px;">
            <li class="scan">
                <p>美西时尚APP</p>
                <img src="/static/img/ewm_indexTop.png" alt="" />
            </li>
            <li class="scan" style="width: 72px;">
                <p>关注我们</p>
                <img src="/static/img/ewm_wx.png" style="margin: 0;" alt="" />
            </li>
        </ul>
    </div>
{% endblock %}


